import { Component } from "solid-js"
import "./index.css"

const TodoHeader: Component<{
  addTodoEvent: (todoName: string) => void
}> = ({ addTodoEvent }) => {
  let inputRef: HTMLInputElement
  const addTodo = () => {
    if (inputRef.value.trim() === "") return
    addTodoEvent(inputRef.value)
    inputRef.value = ""
  }

  return (
    <header>
      <input type="text" ref={inputRef} />
      <button onClick={addTodo}>添加</button>
    </header>
  )
}

export default TodoHeader
